<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按钮大全</title>
        <style type="text/css">
            .field{
                width: 1285px;
                height: 100px;
                margin: 100px auto;
                border-width: 1px;
                border-style: solid;
            }
            .field legend{
                margin-left: 20px;
                padding: 0 10px;
                font-size: 20px;
                font-weight: 300;
            }
            .btn-container{
                width: 1223px;
                height: 48px;
                margin: 20px 30px 10px;
                font-size: 14px;
            }
            .btn{
                width: 94px;
                height: 38px;
                padding: 0 18px;
                margin: 0 7px 10px 0;
                border-radius: 2px;
                cursor: pointer;
                transition: all 0.3s;
                outline: none;/*让点击后按钮的边框消失*/
            }
            .btn-ys{
                border: 1px solid #C9C9C9;
                color: #555;
                background-color: white;
            }
            .btn-ys:hover{
                border-color: #19b955;
            }
            .btn-mr{
                border: none;
                background-color: #009688;
                color: #fff;
            }
            .btn-mr:hover{
                background-color: #4cdb8f;
            }
            .btn-bd{
                border: none;
                color:  #fff;
                background-color: #1E9FFF;
            }
            .btn-bd:hover{
                background-color: #16c1ff;
            }
            .btn-ns{
                border: none;
                color: #fff;
                background-color: #FFB800;
            }
            .btn-ns:hover{
                background-color: #ffe00c;
            }
            .btn-jg{
                border: none;
                color: #fff;
                background-color: #FF5722;
            }
            .btn-jg:hover{
                background-color: #ff8027;
            }
            .btn-jy{
                border: 1px solid #e6e6e6;
                background-color: #FBFBFB;
                color: #C9C9C9;
                cursor: not-allowed;
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <!--这是一个组合表单-->
        <fieldset class="field">
            <legend>按钮主题</legend>
            <div class="btn-container">
                <button class="btn btn-ys">原始按钮</button>
                <button class="btn btn-mr">默认按钮</button>
                <button class="btn btn-bd">百搭按钮</button>
                <button class="btn btn-ns">暖色按钮</button>
                <button class="btn btn-jg">警告按钮</button>
                <button class="btn btn-jy">禁用按钮</button>
            </div>
        </fieldset>


    </body>
</html>